<!DOCTYPE html>
<html>

<head>
  <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  <title>RTMP Publisher Demo</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
    function onSwfInited() {
      var rtmp = document.getElementById("rtmp-publisher");
      if (rtmp.isDisableVideo()) {
        $("#disable_video").attr("checked", true);
      } else {
        $("#disable_video").attr("checked", false);
      }
      if (rtmp.isDisableAudio()) {
        $("#disable_audio").attr("checked", true);
      } else {
        $("#disable_audio").attr("checked", false);
      }
    }

    var flashVars = {
      width: 640,
      height: 480,
      fps: 20,
      file: '1',
      /*
       以下两行为初始化是否禁用音频或视频，如果这里不设置，
       后面可以通过disableVideo(true/false)来动态设置
      */
      disable_video: 'false',
      /*只有'true'才禁用，其他任何值都是false, 此行省略就是false*/
      disable_audio: 'false',
      /*只有'true'才禁用，其他任何值都是false, 此行省略就是false*/
      on_inited: onSwfInited
    };

    function onSwfLoaded() { };

    document.addEventListener("DOMContentLoaded", function (event) {
      swfobject.embedSWF("./RtmpPublisher.2.3.swf", "rtmp-publisher", "640", "480", "9.0.0", null, flashVars, null, null,
        onSwfLoaded);
    });

    $(document).ready(function () {
      $("#disable_video").change(function () {
        var rtmp = document.getElementById("rtmp-publisher");
        rtmp.disableVideo($(this).prop("checked"));
      });

      $("#disable_audio").change(function () {
        var rtmp = document.getElementById("rtmp-publisher");
        rtmp.disableAudio($(this).prop("checked"));
      });

    });

    function openRtmp() {
      var streamer = $('#streamer').val();
      if ('' == streamer) {
        alert('请输入推流地址');
        return;
      }
      var user_name = $('#user_name').val();

      if ('' == user_name) {
        alert('请输入用户名');
        return;
      }

      var password = $('#password').val();
      if ('' == user_name) {
        alert('请输入密码');
        return;
      }
      var service_code = $('#service_code').val();
      if ('' == service_code) {
        alert('请输入服务码');
        return;
      }
      var output_tags = $('#output_tags').val();
      var opaque = $('#opaque').val();
      document.getElementById("btn_open").disabled = true;
      var rtmp = document.getElementById("rtmp-publisher");
      rtmp.open2nginXvs(streamer, user_name, password, service_code, output_tags, opaque);
    }

    function stopPublish() {
      var rtmp = document.getElementById("rtmp-publisher");
      rtmp.stopPublish();
    }

    function closeRtmp() {
      var rtmp = document.getElementById("rtmp-publisher");
      rtmp.close();
    }

    function startPublish() {
      var rtmp = document.getElementById("rtmp-publisher");
      document.getElementById("btn_start_publish").disabled = true;
      rtmp.startPublish(null);
    }

    function rtmpPublishCallback(event) {
      console.log('---' + event);
      switch (event) {
        case 'NetConnection.Connect.Failed':
        case 'NetConnection.Connect.Closed':
        case 'NetConnection.Connect.Rejected':
          document.getElementById("btn_start_publish").disabled = true;
          document.getElementById("btn_open").disabled = false;
          document.getElementById("btn_stop").disabled = true;
          document.getElementById("btn_close").disabled = true;
          break;
        case 'NetConnection.Connect.Success':
          document.getElementById("btn_start_publish").disabled = false;
          document.getElementById("btn_open").disabled = true;
          document.getElementById("btn_close").disabled = false;
          break;
        case "NetStream.Play.PublishNotify":
        case "NetStream.Publish.Start":
          document.getElementById("btn_start_publish").disabled = true;
          document.getElementById("btn_stop").disabled = false;
          break;
        case 'NetStream.Play.UnpublishNotify':
          document.getElementById("btn_start_publish").disabled = false;
          document.getElementById("btn_stop").disabled = true;
          break;
      }
    }

  </script>
</head>

<body>
  <div align="center">
    <h1>RTMP推流到直播云演示</h1>
    <div>
      <a href="https://gitee.com/woan/zby-rtmp-publisher">本演示的代码仓库</a> |
      <a href="http://www.zhiboyun.com">直播云网站</a>
    </div>

    <div id="rtmp-publisher">
      <p>Flash not installed</p>
    </div>
    <div>
      收流地址：
      <input type="text" id="streamer" size="51" value='rtmp://xvs-5.zhiboyun.com/live_in'></input>
      <br/> 禁用视频
      <input type="checkbox" id="disable_video"></input> &nbsp; 禁用音频
      <input type="checkbox" id="disable_audio"></input>
      <br/> 用户名：
      <input type="text" id="user_name" value="001" size="6" value=""></input>
      密码：
      <input type="text" id="password" value="001" size="6" value=""></input>
      服务码:
      <input type="text" id="service_code" value="TESTING" size="12" value=""></input>
      输出标签:
      <input type="text" id="output_tags" size="" value=""></input>
      <br/>
      <br/> 透传字串:
      <textarea id="opaque" cols="39" value="{}"></textarea>
      <br/>
      <br/>
      <div>
        <button onclick="openRtmp();" id="btn_open">连接并开始</button>
        <button onclick="startPublish();" disabled id="btn_start_publish">开始推送</button>
        <button onclick="stopPublish();" disabled id="btn_stop">停止推送</button> 
        <button onclick="closeRtmp();" disabled id="btn_close">关闭</button>
      </div>
    </div>
  </div>
</body>

</html>
